<template>
  <div class="agreement-container">
    <div class="title">
       <span class="spcon">
          <span>
            <img src="@/assets/logo2.png"/>
          </span>
          <span class="sp2"></span>
          <span class="sp3">企业端</span>
       </span>
      <span class="btn" @click="register">
        返回注册
        <i class="el-icon-arrow-right"></i>
      </span>
    </div>


    <div class="conpane">
      <img src="@/assets/login_images/agreement.jpg" />
    </div>
  </div>
</template>

<script>
  import {validUsername} from '@/utils/validate'

  export default {
    name: 'agreement',
    data () {
      return {


      }
    },
    mounted: function () {
      console.log("smslogin-page")
    },
    watch: {
      $route: {
        handler: function (route) {
          this.redirect = route.query && route.query.redirect
        },
        immediate: true
      }
    },
    methods: {

      register: function () {
        console.log("register")
        this.$router.push({path: '/register'})
      },

    }
  }
</script>

<style lang="scss">
  /* 修复input 背景不协调 和光标变色 */
  /* Detail see https://github.com/PanJiaChen/vue-element-admin/pull/927 */

  $bg: #283443;
  $light_gray: black;
  $cursor: black;


  @supports (-webkit-mask: none) and (not (cater-color: $cursor)) {
    .register-container .el-input input {
      color: $cursor;
    }
  }

  /* reset element-ui css */
  .register-container {

    .el-input {
      display: inline-block;
      height: 47px;
      width: 85%;

      input {
        background: transparent;
        -webkit-appearance: none;
        border-radius: 5px;
        padding: 12px 5px 12px 15px;
        color: $light_gray;
        height: 47px;
        caret-color: $cursor;

        &:-webkit-autofill {
          box-shadow: 0 0 0px 1000px $bg inset !important;
          -webkit-text-fill-color: $cursor !important;
        }
      }
    }

    .el-form-item {
      /*border: 1px solid rgba(0, 0, 0, 0.3);*/
      /*background: transparent;*/
      /*border-radius: 5px;*/
      color: black;
    }
  }
</style>

<style lang="scss" scoped>
  $bg: white;
  $dark_gray: #889aa4;
  $light_gray: #eee;
  $main_color: #134bde;

  .agreement-container {
    min-height: 100%;
    width: 100%;
    background-color: $bg;
    overflow: hidden;
    display: flex;
    flex-direction: column;

    .title {
      position: relative;
      width: 100%;
      background-color: #134bde;
      color: white;
      padding: 1rem 3rem;
      display: flex;
      height: 6rem;
      align-items: center;
      justify-content: space-between;

      .spcon{
        position: relative;
        display: flex;
        align-items: center;
        height: 4rem;
      }

      img {
        width: 6rem;
      }
      .sp2 {
        width: 1px;
        background-color:#F0F0F0;
        height: 63%;
        margin: 0 1rem;
      }
      .sp3 {
        font-size: 1.2rem;
        font-weight: bold;
      }

      .btn {
        cursor: pointer;
      }
    }

    .conpane {
      margin: 3rem auto;
      width: 1200px;
      max-width: 90%;

      img{
        width: 100%;
        height: auto;
      }

    }

  }
</style>

